<template>
  <el-dialog v-model="dialogVisible" title="增加库存" width="60%" :before-close="handleClose">
    <div class="amount-add-dialog">
      <el-table border class="sku-table" stripe :data="skuTable">
        <el-table-column prop="name" label="规格" />
        <el-table-column prop="sku" label="sku编号" />
        <el-table-column label="市场价格" prop="market"> </el-table-column>
        <el-table-column label="销售价格" prop="selling"> </el-table-column>
        <el-table-column label="虚拟销量" prop="virtual"> </el-table-column>
        <el-table-column label="重量(kg)" prop="weight"> </el-table-column>
        <el-table-column label="体积(m³)" prop="volume"> </el-table-column>
        <el-table-column label="库存" prop="stock_total"> </el-table-column>
        <el-table-column label="状态" align="center">
          <template #default="{ row }">
            <el-checkbox disabled v-model="row.status" :true-label="1" :false-label="0" size="large" />
          </template>
        </el-table-column>
        <el-table-column label="增加库存" width="200" align="center">
          <template #default="{ row }">
            <el-input-number v-model="row.goods_stock" :min="0" />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="submit"> 提交 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { addGoodsApi as addApi } from "@/plugins/api/shopping/manage";

let dialogVisible = ref(false);
function handleClose(done) {
  // dialogVisible.value = false;
  ElMessageBox.confirm("是否确定关闭此对话框?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
}
let goodsInfo = ref({});
let ruleForm = ref({});
let skuTable = ref([]);
function initFun(row) {
  goodsInfo.value = Object.assign({}, row);
  skuTable.value = [];
  // sku
  let arr = JSON.parse(row.data_items);

  console.log(arr);
  if (arr) {
    skuTable.value = arr.map((item) => {
      item.goods_stock = 1;
      return item;
    });
  }
  console.log(skuTable.value);
  dialogVisible.value = true;
}

const emit = defineEmits(["refreshList"]);
function submit() {
  if (
    skuTable.value.some((item) => {
      return !item.goods_stock;
    })
  ) {
    return ElMessage.warning("请输入库存！");
  }
  let arr = skuTable.value.map((item) => {
    let obj = {
      goods_code: goodsInfo.value.code,
      goods_spec: item.key,
      goods_stock: item.goods_stock,
    };
    return obj;
  });
  addApi(arr).then((data) => {
    ElMessage.success("增加库存成功！");
    dialogVisible.value = false;
    emit("refreshList");
  });
}

onMounted(() => { });
defineExpose({
  initFun,
});
</script>
<style scoped lang="scss">
.amount-add-dialog {
  :deep(.el-form-item) {
    width: 50%;
    margin-right: 0;
    padding-right: 10px;
    box-sizing: border-box;

    .el-input {
      width: 100%;
    }
  }

  .img-box {
    display: inline-block;
    margin-right: 5px;
    // margin-bottom: 10px;
    width: 148px;
    position: relative;

    img {
      width: 100%;
      height: 140px;
      object-fit: cover;
    }

    .occlusion {
      display: none;
      width: 100%;
      height: 140px;
      background: #9e9c9c75;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 99;
      text-align: center;

      .del {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        line-height: 148px;
        color: #464444;
        cursor: pointer;
        font-size: large;

        &:hover {
          color: rgb(130, 131, 133);
        }
      }
    }

    &:hover {
      .occlusion {
        display: block;
      }
    }
  }
}
</style>
